<template>
	<div class="icons">
		<div class="icon">
			<div class="icon-img">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
			</div>
			<p class="icon-desc">热门景点</p>
		</div>
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" />
			</div>
			<p class="icon-desc">一日游</p>
		</div>
		
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" />
			</div>
			<p class="icon-desc">武汉必游</p>
		</div>
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png" />
			</div>
			<p class="icon-desc">亲子游</p>
		</div>
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png" />
			</div>
			<p class="icon-desc">游乐场</p>
		</div>
		
		
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" />
			</div>
			<p class="icon-desc">动植物园</p>
		</div>
		
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" />
			</div>
			<p class="icon-desc">踏青赏花</p>
		</div>
		
		<div class="icon">
			<div>
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png" />
			</div>
			<p class="icon-desc">武汉欢乐谷</p>
		</div>
		
	</div>
</template>

<script>
export default{
  name: "HomeIcons"	,
	
}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/varibles.styl'
	@import '~@/assets/styles/mixins.styl'
   .icons{
	   overflow: hidden;
	   height: 0;
	   padding-bottom: 50%;
	   // background: green;
   }
   .icon{
	   position: relative;
	   width: 25%;
	   padding-bottom: 22%;
	   float: left;
	   height: 0;
	   // background: red; 
	   overflow: hidden;
   }
   
   .icon-img{
	   position: absolute;
	   top:0;
	   left:0;
	   right:0;
	   bottom:.44rem;
	   // background: blue;
	   box-sizing:border-box;
	   padding: .1rem;
   }
   .icon-img-content{
	   height: 50px;
	   width: 50px;
	   display: block;
	   margin: 0 auto;
   }
   
   .icon-desc{
	   position: absolute;
	   top:0;
	   left:0;
	   right:0;
	   height:50px;
	   line-height: 120px;
	   text-align: center;
	   color: $darkTextColor;
		 //overflow: hidden;
		 // white-space: nowrap;
		 // text-overflow: ellipsis;
		 // ellipsis();
   }
</style>
